<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>添加会议</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-input-block {
            margin-left: 90px;
        }

        .layui-form-label {
            width: 90px;
            padding: 9px 0px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form method="post" class="layui-form" onsubmit="return false">
        <div class="layui-form-item">
            <label class="layui-form-label required">会议室名称：</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" th:value="${meet?.name}"
                       lay-reqtext="会议室名称不能为空" placeholder="请输入会议室名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会议类型：</label>
            <div class="layui-input-block">
                <select id="type" name="typeValue" lay-filter="typeSelect">
                    <option value="0"></option>
                    <option th:each="type,types:${types}"
                            th:value="${type.value}"
                            th:text="${type.name}"
                            th:selected="${meet?.typeValue == type.value}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所在会议室：</label>
            <div class="layui-input-block">
                <select id="room" name="roomId" lay-filter="roomSelect">
                    <option value="0"></option>
                    <option th:each="room,rooms:${rooms}"
                            th:value="${room.id}"
                            th:text="${room.name}"
                            th:selected="${meet?.roomId == room.id}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">开始时间：</label>
            <div class="layui-input-block">
                <input type="datetime-local" lay-verify="required" name="startTimeStr" th:value="${meet?.startTimeStr}"
                       lay-reqtext="开始时间不能为空" placeholder="请输入开始时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">结束时间：</label>
            <div class="layui-input-block">
                <input type="datetime-local" lay-verify="required" name="endTimeStr" th:value="${meet?.endTimeStr}"
                       lay-reqtext="结束时间不能为空" placeholder="请输入结束时间" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">发起部门：</label>
            <div class="layui-input-block">
                <input id="deptName" type="text" name="deptName" readonly th:value="${meet?.deptName}"
                       placeholder="请选择部门" class="layui-input" style="width:80%;float:left;">
                <button class="layui-btn layui-bg-gray" type="button" id="dept-clear" style="width:18%;float:right;">
                    清空
                </button>
            </div>
            <div class="layui-hide">
                <input id="deptId" placeholder="隐藏的部门id" value="0" name="deptId" th:value="${meet?.deptId}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主持人：</label>
            <div class="layui-input-block">
                <input id="empName" type="text" name="empName" readonly th:value="${meet?.empName}"
                       placeholder="请选择部门负责人" class="layui-input" style="width:80%;float:left;">
                <button class="layui-btn layui-bg-gray" type="button" id="emp-clear" style="width:18%;float:right;">清空
                </button>
            </div>
            <div class="layui-hide">
                <input id="empId" placeholder="隐藏的人员id" value="0" name="empId" th:value="${meet?.empId}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话：</label>
            <div class="layui-input-block">
                <input type="text" name="telephone" th:value="${meet?.telephone}"
                       placeholder="请输入联系电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会议说明：</label>
            <div class="layui-input-block">
                <input type="text" name="content" th:value="${meet?.content}"
                       placeholder="请输入会议说明" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">参会人员：</label>
            <div class="layui-input-block">
                <textarea id="empNames" readonly name="empNames" th:utext="${meet?.empNames}"
                          class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-hide">
            <button type="button" id="save" lay-submit lay-filter="save">保存</button>
        </div>
    </form>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script th:inline="javascript">
    var empIds = [
        [# th:each="empId : ${empsId}"][[${empId}]], [/]
        ];
    var deptIds = [];
    var roomName = '';
    var typeName = '';

    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //会议室下拉框选择
        form.on('select(roomSelect)', function (data) {
            roomName = data.elem[data.elem.selectedIndex].text;
        });

        //类型下拉框选择
        form.on('select(typeSelect)', function (data) {
            typeName = data.elem[data.elem.selectedIndex].text;
        });

        //选择部门
        var deptName = $("#deptName");
        var deptId = $("#deptId");
        deptName.click(function () {
            var open = layer.open({
                title: '选择部门',
                type: 2,
                shadeClose: true,
                scrollbar: false,
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                content: '/sys/dept/select',
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var dept = iframeWin.checkedbox;
                    deptName.val(dept['name']);
                    deptId.val(dept['id']);
                    layer.close(index);
                }
            });
        });
        $("#dept-clear").click(function () {
            deptId.val('0');
            deptName.val('');
        });

        //选择人
        var empName = $("#empName");
        var empId = $("#empId");
        empName.click(function () {
            var open = layer.open({
                title: '选择主持人',
                type: 2,
                shadeClose: true,
                scrollbar: false,
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                content: '/emp/select/one',
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var checkedbox = iframeWin.checkbox;
                    empId.val(checkedbox['id']);
                    empName.val(checkedbox['name']);
                    layer.close(index);
                }
            });
        });
        $("#emp-clear").click(function () {
            empId.val('0');
            empName.val('');
        });

        //选择参会人员
        var empNames = $('#empNames');
        empNames.click(function () {
            var open = layer.open({
                title: '选择人员信息',
                type: 2,
                shadeClose: true,
                scrollbar: false,
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                content: '/emp/select/list',
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var depts = iframeWin.layui.transfer.getData('selectdept');
                    var emps = iframeWin.layui.transfer.getData('selectemp');
                    var empsvalue = '';
                    empIds=[];
                    deptIds=[];
                    emps.forEach(function (item,index){
                        if(index<1){
                            empsvalue=item.title;
                        }else{
                            empsvalue+=','+item.title;
                        }
                        empIds[index]=item.value;
                    });
                    depts.forEach(function (item,index){
                        if(index<1&&empsvalue.length<=0){
                            empsvalue+=item.title;
                        }else{
                            empsvalue+=','+item.title;
                        }
                        deptIds[index]=item.value;
                    });
                    empNames.val(empsvalue);
                    body.find("#save").click();
                    layer.close(index);
                },
                success:function (layero, index) {
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    iframeWin.rightempdata=empIds;
                }
            });
        });
    });
</script>
</body>
</html>